ããã³ããšã³ãã®ãªã¢ã«ã¿ã€ã ããŒã¿åæã®èæ¯ã«ããæè¡ãšãã¯ãããžãŒãæ¢æ±ããå¹ççãªã©ã€ãããŒã¿æŽæ°ç®¡çã«ãã£ãŠWebã¢ããªã±ãŒã·ã§ã³ãææ°æ å ±ã衚瀺ã§ããããã«ããŸãã
ããã³ããšã³ãã®ãªã¢ã«ã¿ã€ã ããŒã¿åæïŒã©ã€ãããŒã¿æŽæ°ç®¡ç
仿¥ã®ããŒã¹ã®éãããžã¿ã«äžçã§ã¯ããŠãŒã¶ãŒã¯ã¢ããªã±ãŒã·ã§ã³ãææ°ã®æ å ±ã衚瀺ããããšãæåŸ ããŠããŸãããªã¢ã«ã¿ã€ã ããŒã¿åæã¯ãã©ã€ãããã·ã¥ããŒããå ±åäœæ¥ããŒã«ãåšåº«ç¶æ³ã衚瀺ããeã³ããŒã¹ãã©ãããã©ãŒã ãéèååŒãã©ãããã©ãŒã ããœãŒã·ã£ã«ã¡ãã£ã¢ãã£ãŒããªã©ã®ã¢ããªã±ãŒã·ã§ã³ã«ãšã£ãŠæ¥µããŠéèŠã§ãããã®èšäºã§ã¯ãããã³ããšã³ãã§ã®ã©ã€ãããŒã¿æŽæ°ç®¡çã«é¢é£ããäž»èŠãªæŠå¿µãæè¡ãããã³ãã¯ãããžãŒã«ã€ããŠè©³ãã解説ããŸãã
ãªããªã¢ã«ã¿ã€ã ããŒã¿åæãéèŠãªã®ã
ãªã¢ã«ã¿ã€ã ããŒã¿åæãšã¯ãæåã§ããŒãžãæŽæ°ããããšãªããããã¯ãšã³ããµãŒããŒãä»ã®ã¯ã©ã€ã¢ã³ãã§çºçãã倿Žãããã³ããšã³ãã®ã€ã³ã¿ãŒãã§ãŒã¹ã«èªåçã«æŽæ°ããããã»ã¹ãæããŸãããã®å©ç¹ã¯éåžžã«å€§ããã§ãïŒ
- ãŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ã®åäžïŒå³æã®æŽæ°ã衚瀺ããããšã§ãã·ãŒã ã¬ã¹ã§é åçãªäœéšãæäŸãããŠãŒã¶ãŒæºè¶³åºŠãé«ããŸãã
- å¹çã®åäžïŒãŠãŒã¶ãŒãææ°æ å ±ã確èªããããã«æåã§ããŒãžãæŽæ°ããå¿ èŠããªããªããæéãšåŽåãç¯çŽããŸãã
- ã³ã©ãã¬ãŒã·ã§ã³ã®åŒ·åïŒãŠãŒã¶ãŒéã®ãªã¢ã«ã¿ã€ã ãªå ±åäœæ¥ãå¯èœã«ãããã广çã«ååã§ããããã«ãªããŸããäŸãšããŠãå ±åããã¥ã¡ã³ãç·šéããŒã«ããããžã§ã¯ã管çããŒã«ã§ã¯ã倿Žããã¹ãŠã®åå è ã«å³åº§ã«è¡šç€ºãããŸãã
- ããè¯ãæææ±ºå®ïŒææ°ã®æ å ±ã«ã¢ã¯ã»ã¹ã§ããããããŠãŒã¶ãŒã¯ãªã¢ã«ã¿ã€ã ããŒã¿ã«åºã¥ããŠæ å ±ã«åºã¥ããæææ±ºå®ãè¡ãããšãã§ããŸããäŸ¡æ Œå€åãå³åº§ã«åæ ãããå¿ èŠãããæ ªåŒååŒãã©ãããã©ãŒã ãèããŠã¿ãŠãã ããã
ãªã¢ã«ã¿ã€ã ããŒã¿åæã«ãããäžè¬çãªèª²é¡
ãªã¢ã«ã¿ã€ã ããŒã¿åæã®å®è£ ã«ã¯ãããã€ãã®èª²é¡ã䌎ããŸãïŒ
- è€éãïŒãªã¢ã«ã¿ã€ã éä¿¡ãã£ãã«ã®ã»ããã¢ãããšç¶æã«ã¯ãæ éãªèšç»ãšå®è£ ãå¿ èŠã§ãã
- ã¹ã±ãŒã©ããªãã£ïŒå€æ°ã®åææ¥ç¶ãåŠçããããšã¯ããµãŒããŒãªãœãŒã¹ã«è² è·ããããæé©åãããã€ã³ãã©ã¹ãã©ã¯ãã£ãå¿ èŠãšããŸãã
- ä¿¡é Œæ§ïŒä¿¡é Œæ§ã®é«ããªã¢ã«ã¿ã€ã äœéšãç¶æããããã«ã¯ãããŒã¿ã®äžè²«æ§ã確ä¿ããæ¥ç¶ã®äžæã«å¯ŸåŠããããšãäžå¯æ¬ ã§ããç¹ã«ã¢ãã€ã«ããã€ã¹ãã€ã³ãã©ã貧匱ãªå°åã§ã®ãããã¯ãŒã¯ã®äžå®å®ãã¯ã倧ããªèª²é¡ãšãªãå¯èœæ§ããããŸãã
- ã»ãã¥ãªãã£ïŒãªã¢ã«ã¿ã€ã ããŒã¿ã¹ããªãŒã ãäžæ£ã¢ã¯ã»ã¹ãæ¹ããããä¿è·ããããšãæéèŠã§ããé©åãªèªèšŒã»èªå¯ã¡ã«ããºã ãå®è£ ããããšãäžå¯æ¬ ã§ãã
- ããŒã¿éïŒå€§éã®ãªã¢ã«ã¿ã€ã ããŒã¿ãå¹ççã«åŠçããããšã¯ããªãœãŒã¹ã倧éã«æ¶è²»ããå¯èœæ§ããããŸããããŒã¿è»¢éãšåŠçã®æé©åãéèŠã§ãã
ããã³ããšã³ãã®ãªã¢ã«ã¿ã€ã ããŒã¿åæã®ããã®æè¡
ããã³ããšã³ãã§ãªã¢ã«ã¿ã€ã ããŒã¿åæãå®çŸããããã«ã¯ãããã€ãã®æè¡ã䜿çšã§ããŸããåæè¡ã«ã¯ããããé·æãšçæããããæé©ãªéžæã¯ã¢ããªã±ãŒã·ã§ã³ã®ç¹å®ã®èŠä»¶ã«ãã£ãŠç°ãªããŸãã
1. ããŒãªã³ã°
ããŒãªã³ã°ã¯ãããã³ããšã³ãã宿çã«ããã¯ãšã³ãã«ãªã¯ãšã¹ããéä¿¡ããŠæŽæ°ã確èªããæ¹æ³ã§ããå®è£ ã¯ç°¡åã§ãããäžè¬çã«éå¹çã§ãããç¹ã«å€æ°ã®ãŠãŒã¶ãŒãããå Žåã«ã¯ãµãŒããŒãªãœãŒã¹ã«å€§ããªè² è·ããããå¯èœæ§ããããŸãã
ããŒãªã³ã°ã®ä»çµã¿ïŒ
- ããã³ããšã³ãã¯ããããããå®çŸ©ãããééïŒäŸïŒ5ç§ããšïŒã§ããã¯ãšã³ãã«ãªã¯ãšã¹ããéä¿¡ããŸãã
- ããã¯ãšã³ãã¯æŽæ°ã確èªããææ°ã®ããŒã¿ãããã³ããšã³ãã«è¿ããŸãã
- ããã³ããšã³ãã¯ãåä¿¡ããããŒã¿ã§UIãæŽæ°ããŸãã
- ãã®ããã»ã¹ãç¶ç¶çã«ç¹°ãè¿ãããŸãã
ããŒãªã³ã°ã®æ¬ ç¹ïŒ
- éå¹çïŒæŽæ°ããªãå Žåã§ãããã³ããšã³ãããªã¯ãšã¹ããéä¿¡ããããã垯åå¹ ãšãµãŒããŒãªãœãŒã¹ãç¡é§ã«ããŸãã
- é å»¶ïŒæŽæ°ã¯ããŒãªã³ã°ééã§ããåæ ãããªããããé å»¶ãçºçããå¯èœæ§ããããŸãã
- ã¹ã±ãŒã©ããªãã£ã®åé¡ïŒå€æ°ã®ãŠãŒã¶ãŒããã®é »ç¹ãªããŒãªã³ã°ã¯ããµãŒããŒã«éè² è·ããããå¯èœæ§ããããŸãã
äŸïŒJavaScriptïŒïŒ
function fetchData() {
fetch('/api/data')
.then(response => response.json())
.then(data => {
// Update the UI with the received data
updateUI(data);
})
.catch(error => {
console.error('Error fetching data:', error);
});
}
// Set the polling interval (e.g., every 5 seconds)
setInterval(fetchData, 5000);
2. ãã³ã°ããŒãªã³ã°
ãã³ã°ããŒãªã³ã°ã¯ãåŸæ¥ã®ããŒãªã³ã°ãæ¹è¯ãããã®ã§ããããã¯ãšã³ãã¯ããã³ããšã³ãã®ãªã¯ãšã¹ãã«ããã«å¿çããã®ã§ã¯ãªããæŽæ°ãå©çšå¯èœã«ãªããã¿ã€ã ã¢ãŠããçºçãããŸã§æ¥ç¶ãéãããŸãŸã«ããŸããããã«ãããäžèŠãªãªã¯ãšã¹ããæžããå¹çãåäžããŸãã
ãã³ã°ããŒãªã³ã°ã®ä»çµã¿ïŒ
- ããã³ããšã³ããããã¯ãšã³ãã«ãªã¯ãšã¹ããéä¿¡ããŸãã
- ããã¯ãšã³ãã¯æ¥ç¶ãéãããŸãŸã«ããŸãã
- æŽæ°ãå©çšå¯èœã«ãªããšãããã¯ãšã³ãã¯ããŒã¿ãããã³ããšã³ãã«éä¿¡ããæ¥ç¶ãéããŸãã
- ããã³ããšã³ãã¯ããŒã¿ãåä¿¡ããããã«æ°ãããªã¯ãšã¹ããããã¯ãšã³ãã«éä¿¡ããŠãããã»ã¹ãåéããŸãã
ãã³ã°ããŒãªã³ã°ã®å©ç¹ïŒ
- ããŒãªã³ã°ãããå¹ççïŒäžèŠãªãªã¯ãšã¹ãã®æ°ãæžãããŸãã
- äœé å»¶ïŒåŸæ¥ã®ããŒãªã³ã°ãããè¿ éã«æŽæ°ãåæ ãããŸãã
ãã³ã°ããŒãªã³ã°ã®æ¬ ç¹ïŒ
- äŸç¶ãšããŠéå¹çïŒåæŽæ°ããšã«æ°ãããªã¯ãšã¹ããå¿ èŠã§ãããäŸç¶ãšããŠãªãœãŒã¹ã倧éã«æ¶è²»ããå¯èœæ§ããããŸãã
- è€éãïŒé·æéæç¶ããæ¥ç¶ã管çããããã«ãããè€éãªãµãŒããŒãµã€ãã®ããžãã¯ãå¿ èŠã§ãã
- ã¿ã€ã ã¢ãŠãã®åé¡ïŒé·æéæŽæ°ããªãå Žåãæ¥ç¶ãã¿ã€ã ã¢ãŠãããå¯èœæ§ããããŸãã
äŸïŒæŠå¿µïŒïŒ
ãµãŒããŒã¯æ°ããããŒã¿ãå°çãããŸã§æ¥ç¶ãéãããŸãŸã«ãããã®åŸããŒã¿ãéä¿¡ããŠæ¥ç¶ãéããŸããã¯ã©ã€ã¢ã³ãã¯ããã«æ°ããæ¥ç¶ãéããŸãã
3. Server-Sent Events (SSE)
Server-Sent Events (SSE)ã¯ãããã¯ãšã³ããåäžã®HTTPæ¥ç¶ãä»ããŠããã³ããšã³ãã«æŽæ°ãããã·ã¥ã§ããããã«ãã軜éãããã³ã«ã§ããSSEã¯åæ¹åïŒãµãŒããŒããã¯ã©ã€ã¢ã³ããžïŒã§ããããããã¥ãŒã¹ãã£ãŒããæ ªäŸ¡è¡šç€ºãªã©ããµãŒããŒãããŒã¿ãããŒãéå§ããã¢ããªã±ãŒã·ã§ã³ã«é©ããŠããŸãã
SSEã®ä»çµã¿ïŒ
- ããã³ããšã³ãã¯`EventSource` APIã䜿çšããŠãããã¯ãšã³ããžã®æ°žç¶çãªæ¥ç¶ã確ç«ããŸãã
- ããã¯ãšã³ãã¯ã確ç«ãããæ¥ç¶ãä»ããŠSSEã€ãã³ããšããŠããŒã¿æŽæ°ãããã³ããšã³ãã«éä¿¡ããŸãã
- ããã³ããšã³ãã¯ã€ãã³ããåä¿¡ããããã«å¿ããŠUIãæŽæ°ããŸãã
- æ¥ç¶ã¯ãããã³ããšã³ããŸãã¯ããã¯ãšã³ãã®ããããã«ãã£ãŠæç€ºçã«éãããããŸã§éãããŸãŸã«ãªããŸãã
SSEã®å©ç¹ïŒ
- å¹ççïŒè€æ°ã®æŽæ°ã«å¯ŸããŠåäžã®æ°žç¶çãªæ¥ç¶ã䜿çšããŸãã
- ã·ã³ãã«ïŒWebSocketãšæ¯èŒããŠå®è£ ãæ¯èŒçç°¡åã§ãã
- çµã¿èŸŒã¿ã®åæ¥ç¶æ©èœïŒ`EventSource` APIã¯ãæ¥ç¶ã倱ãããå Žåã«èªåçã«åæ¥ç¶ãåŠçããŸãã
- HTTPããŒã¹ïŒæšæºã®HTTPäžã§åäœãããããæ¢åã®ã€ã³ãã©ã¹ãã©ã¯ãã£ãšäºææ§ããããŸãã
SSEã®æ¬ ç¹ïŒ
- åæ¹åïŒãµãŒããŒããã¯ã©ã€ã¢ã³ããžã®éä¿¡ã®ã¿ããµããŒãããŸãã
- ãã©ãŠã¶ã®ãµããŒããéå®çïŒå€ããã©ãŠã¶ã¯SSEãå®å šã«ãµããŒãããŠããªãå ŽåããããŸããïŒãã ããããªãã£ã«ãå©çšå¯èœã§ãïŒã
- ããã¹ãããŒã¹ïŒããŒã¿ã¯ããã¹ããšããŠéä¿¡ãããããããã€ããªããŒã¿ãããå¹çãäœãå ŽåããããŸãã
äŸïŒJavaScript - ããã³ããšã³ãïŒïŒ
const eventSource = new EventSource('/events');
eventSource.onmessage = (event) => {
const data = JSON.parse(event.data);
// Update the UI with the received data
updateUI(data);
};
eventSource.onerror = (error) => {
console.error('EventSource error:', error);
};
äŸïŒNode.js - ããã¯ãšã³ãïŒïŒ
const express = require('express');
const app = express();
const port = 3000;
app.get('/events', (req, res) => {
res.setHeader('Content-Type', 'text/event-stream');
res.setHeader('Cache-Control', 'no-cache');
res.setHeader('Connection', 'keep-alive');
res.flushHeaders();
let count = 0;
const intervalId = setInterval(() => {
const data = { count: count++ };
res.write(`data: ${JSON.stringify(data)}\n\n`);
}, 1000);
req.on('close', () => {
clearInterval(intervalId);
res.end();
});
});
app.listen(port, () => {
console.log(`Server listening at http://localhost:${port}`);
});
4. WebSocket
WebSocketã¯ãåäžã®TCPæ¥ç¶ãä»ããŠå šäºééä¿¡ãã£ãã«ãæäŸããŸããããã«ãããããã³ããšã³ããšããã¯ãšã³ãéã§ãªã¢ã«ã¿ã€ã ã®åæ¹åéä¿¡ãå¯èœã«ãªãããã£ããã¢ããªã±ãŒã·ã§ã³ããªã³ã©ã€ã³ã²ãŒã ãéèååŒãã©ãããã©ãŒã ãªã©ãäœé å»¶ãšé«ã¹ã«ãŒããããå¿ èŠãšããã¢ããªã±ãŒã·ã§ã³ã«æé©ã§ãã
WebSocketã®ä»çµã¿ïŒ
- ããã³ããšã³ããããã¯ãšã³ããžã®WebSocketæ¥ç¶ãéå§ããŸãã
- ããã¯ãšã³ããæ¥ç¶ãåãå ¥ããæ°žç¶çãªåæ¹åéä¿¡ãã£ãã«ã確ç«ããŸãã
- ããã³ããšã³ããšããã¯ãšã³ãã®äž¡æ¹ãã確ç«ãããæ¥ç¶ãä»ããŠãªã¢ã«ã¿ã€ã ã§ããŒã¿ãéåä¿¡ã§ããŸãã
- æ¥ç¶ã¯ãããã³ããšã³ããŸãã¯ããã¯ãšã³ãã®ããããã«ãã£ãŠæç€ºçã«éãããããŸã§éãããŸãŸã«ãªããŸãã
WebSocketã®å©ç¹ïŒ
- å šäºéïŒåæ¹åéä¿¡ããµããŒãããããã³ããšã³ããšããã¯ãšã³ãã®äž¡æ¹ãåæã«ããŒã¿ãéåä¿¡ã§ããŸãã
- äœé å»¶ïŒéåžžã«äœãé å»¶ãæäŸãããªã¢ã«ã¿ã€ã ã¢ããªã±ãŒã·ã§ã³ã«æé©ã§ãã
- å¹ççïŒãã¹ãŠã®éä¿¡ã«åäžã®TCPæ¥ç¶ã䜿çšããããããªãŒããŒããããåæžãããŸãã
- ãã€ããªããŒã¿ãµããŒãïŒãã€ããªããŒã¿ã®éä¿¡ããµããŒãããŠãããç¹å®ã®çš®é¡ã®ããŒã¿ã«å¯ŸããŠããå¹ççã§ãã
WebSocketã®æ¬ ç¹ïŒ
- è€éãïŒããŒãªã³ã°ãSSEãšæ¯èŒããŠãããè€éãªå®è£ ãå¿ èŠã§ãã
- ã¹ã±ãŒã©ããªãã£ã®èª²é¡ïŒå€æ°ã®åæWebSocketæ¥ç¶ã管çããããšã¯ããªãœãŒã¹ã倧éã«æ¶è²»ããå¯èœæ§ããããŸãã
- ãã¡ã€ã¢ãŠã©ãŒã«ã®åé¡ïŒäžéšã®ãã¡ã€ã¢ãŠã©ãŒã«ã¯WebSocketæ¥ç¶ããããã¯ããå¯èœæ§ããããŸãã
äŸïŒJavaScript - ããã³ããšã³ãïŒïŒ
const socket = new WebSocket('ws://localhost:8080');
socket.onopen = () => {
console.log('WebSocket connection established');
socket.send(JSON.stringify({ message: 'Hello from the frontend!' }));
};
socket.onmessage = (event) => {
const data = JSON.parse(event.data);
// Update the UI with the received data
updateUI(data);
};
socket.onclose = () => {
console.log('WebSocket connection closed');
};
socket.onerror = (error) => {
console.error('WebSocket error:', error);
};
äŸïŒNode.js - `ws` ã©ã€ãã©ãªã䜿çšããããã¯ãšã³ãïŒïŒ
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', ws => {
console.log('Client connected');
ws.on('message', message => {
console.log(`Received message: ${message}`);
// Broadcast the message to all connected clients
wss.clients.forEach(client => {
if (client !== ws && client.readyState === WebSocket.OPEN) {
client.send(message);
}
});
});
ws.on('close', () => {
console.log('Client disconnected');
});
ws.onerror = error => {
console.error('WebSocket error:', error);
};
});
console.log('WebSocket server started on port 8080');
5. ããã·ã¥éç¥
ããã·ã¥éç¥ã䜿çšãããšãããã¯ãšã³ãã¯ã¢ããªã±ãŒã·ã§ã³ããã©ã¢ã°ã©ãŠã³ãã§ã¢ã¯ãã£ãã«å®è¡ãããŠããªãå Žåã§ãããŠãŒã¶ãŒã®ããã€ã¹ã«çŽæ¥éç¥ãéä¿¡ã§ããŸããããã¯ç¹ã«ã¢ãã€ã«ã¢ããªã±ãŒã·ã§ã³ã«äŸ¿å©ã§ããªã¢ã«ã¿ã€ã ã®æŽæ°ãã¢ã©ãŒããã¡ãã»ãŒãžãé ä¿¡ããããã«äœ¿çšã§ããŸãã
ããã·ã¥éç¥ã®ä»çµã¿ïŒ
- ãŠãŒã¶ãŒãã¢ããªã±ãŒã·ã§ã³ããã®ããã·ã¥éç¥ã®åä¿¡ãèš±å¯ããŸãã
- ããã³ããšã³ãã¯ãããã·ã¥éç¥ãµãŒãã¹ïŒäŸïŒFirebase Cloud Messaging (FCM)ãApple Push Notification Service (APNs)ïŒã«ããã€ã¹ãç»é²ããŸãã
- ããã·ã¥éç¥ãµãŒãã¹ã¯ãã¢ããªã±ãŒã·ã§ã³ã«äžæã®ããã€ã¹ããŒã¯ã³ãæäŸããŸãã
- ã¢ããªã±ãŒã·ã§ã³ã¯ããã€ã¹ããŒã¯ã³ãããã¯ãšã³ãã«éä¿¡ããŸãã
- ããã¯ãšã³ããéç¥ãéä¿¡ããå¿ èŠãããå Žåãããã€ã¹ããŒã¯ã³ãšéç¥ãã€ããŒããå«ããªã¯ãšã¹ããããã·ã¥éç¥ãµãŒãã¹ã«éä¿¡ããŸãã
- ããã·ã¥éç¥ãµãŒãã¹ã¯ããŠãŒã¶ãŒã®ããã€ã¹ã«éç¥ãé ä¿¡ããŸãã
ããã·ã¥éç¥ã®å©ç¹ïŒ
- ãªã¢ã«ã¿ã€ã é ä¿¡ïŒéç¥ã¯ã»ãŒå³åº§ã«é ä¿¡ãããŸãã
- ãšã³ã²ãŒãžã¡ã³ãåäžïŒãŠãŒã¶ãŒãåãšã³ã²ãŒãžããã¢ããªã±ãŒã·ã§ã³ã«åŒã³æ»ãããã«äœ¿çšã§ããŸãã
- ããã¯ã°ã©ãŠã³ãã§åäœïŒã¢ããªã±ãŒã·ã§ã³ãå®è¡ãããŠããªããŠãéç¥ãé ä¿¡ã§ããŸãã
ããã·ã¥éç¥ã®æ¬ ç¹ïŒ
- ãã©ãããã©ãŒã åºæïŒãã©ãããã©ãŒã åºæã®ããã·ã¥éç¥ãµãŒãã¹ïŒäŸïŒAndroidçšã®FCMãiOSçšã®APNsïŒãšã®çµ±åãå¿ èŠã§ãã
- ãŠãŒã¶ãŒã®èš±å¯ãå¿ èŠïŒãŠãŒã¶ãŒã¯éç¥ã®åä¿¡ãèš±å¯ããå¿ èŠããããŸãã
- è¿·æã«ãªãå¯èœæ§ïŒé床ãŸãã¯ç¡é¢ä¿ãªéç¥ã¯ãŠãŒã¶ãŒãèç«ãããå¯èœæ§ããããŸãã
äŸïŒæŠå¿µïŒïŒ
Firebase Cloud Messaging (FCM)ãªã©ã®ããã·ã¥éç¥ãµãŒãã¹ã«ã¢ããªãç»é²ããããã³ããšã³ãã§éç¥ãåŠçããããšãå«ãŸããŸãã
é©åãªæè¡ã®éžæ
ããã³ããšã³ãã®ãªã¢ã«ã¿ã€ã ããŒã¿åæã«æé©ãªæè¡ã¯ãããã€ãã®èŠå ã«ãã£ãŠç°ãªããŸãïŒ
- ã¢ããªã±ãŒã·ã§ã³ã®èŠä»¶ïŒããŒã¿æŽæ°ã®é »åºŠãšéãå¿ èŠãªé å»¶ãå¿ èŠãªåæ¹åéä¿¡ã®ã¬ãã«ãèæ ®ããŸãã
- ã¹ã±ãŒã©ããªãã£ã®èŠä»¶ïŒäºæ³ãããåæãŠãŒã¶ãŒæ°ãšããŒã¿éãåŠçã§ããæè¡ãéžæããŸãã
- ãã©ãŠã¶ã®ãµããŒãïŒéžæããæè¡ã察象ã®ãã©ãŠã¶ã§ãµããŒããããŠããããšã確èªããŸãã
- è€éãïŒå®è£ ã®è€éããšåæè¡ã®å©ç¹ã®ãã©ã³ã¹ãåããŸãã
- ã€ã³ãã©ã¹ãã©ã¯ãã£ïŒæ¢åã®ã€ã³ãã©ã¹ãã©ã¯ãã£ãšéžæããæè¡ãšã®äºææ§ãèæ ®ããŸãã
決å®ã«åœ¹ç«ã€ç°¡åãªèŠçŽè¡šã以äžã«ç€ºããŸãïŒ
| æè¡ | éä¿¡æ¹åŒ | é å»¶ | å¹ç | è€éã | ãŠãŒã¹ã±ãŒã¹ |
|---|---|---|---|---|---|
| ããŒãªã³ã° | åæ¹åïŒã¯ã©ã€ã¢ã³ãâãµãŒããŒïŒ | é« | äœ | äœ | æŽæ°é »åºŠã®äœãã·ã³ãã«ãªã¢ããªã±ãŒã·ã§ã³ãäžè¬çã«ãªã¢ã«ã¿ã€ã ã¢ããªã±ãŒã·ã§ã³ã«ã¯æšå¥šãããŸããã |
| ãã³ã°ããŒãªã³ã° | åæ¹åïŒã¯ã©ã€ã¢ã³ãâãµãŒããŒïŒ | äž | äž | äž | SSEãWebSocketãå©çšã§ããªãäžçšåºŠã®æŽæ°é »åºŠã®ã¢ããªã±ãŒã·ã§ã³ã |
| Server-Sent Events (SSE) | åæ¹åïŒãµãŒããŒâã¯ã©ã€ã¢ã³ãïŒ | äœ | é« | äž | ãªã¢ã«ã¿ã€ã ããŒã¿ã¹ããªãŒã ããã¥ãŒã¹ãã£ãŒããæ ªäŸ¡è¡šç€ºããµãŒããŒãããŒã¿ãããŒãéå§ããã¢ããªã±ãŒã·ã§ã³ã |
| WebSocket | åæ¹åïŒå šäºéïŒ | éåžžã«äœã | é« | é« | ãã£ããã¢ããªã±ãŒã·ã§ã³ããªã³ã©ã€ã³ã²ãŒã ãéèååŒãã©ãããã©ãŒã ãäœé å»¶ãšåæ¹åéä¿¡ãå¿ èŠãšããã¢ããªã±ãŒã·ã§ã³ã |
| ããã·ã¥éç¥ | ãµãŒããŒâã¯ã©ã€ã¢ã³ã | éåžžã«äœã | é« | äžïŒãã©ãããã©ãŒã åºæã®çµ±åãå¿ èŠïŒ | ã¢ãã€ã«ã¢ããªã®éç¥ãã¢ã©ãŒããã¡ãã»ãŒãžã |
ããã³ããšã³ãã®ãã¬ãŒã ã¯ãŒã¯ãšã©ã€ãã©ãª
ReactãAngularãVue.jsãªã©ã®äººæ°ã®ããã³ããšã³ããã¬ãŒã ã¯ãŒã¯ã¯ããªã¢ã«ã¿ã€ã ããŒã¿åæã匷åã«ãµããŒãããŠããŸãããããã®æè¡ã®å®è£ ãç°¡çŽ åããããŸããŸãªã©ã€ãã©ãªãããŒã«ãæäŸããŠããŸãã
React
- `socket.io-client`ïŒReactã¢ããªã±ãŒã·ã§ã³ã§WebSocketãæ±ãããã®äººæ°ã®ã©ã€ãã©ãªã
- `react-use-websocket`ïŒWebSocketæ¥ç¶ã管çããããã®Reactããã¯ã
- `EventSource` APIïŒSSEã«çŽæ¥äœ¿çšã§ããŸãã
- ReduxãZustandãªã©ã®ç¶æ 管çã©ã€ãã©ãªãçµ±åããŠããªã¢ã«ã¿ã€ã ããŒã¿ãåŠçã§ããŸãã
Angular
- `ngx-socket-io`ïŒWebSocketãæ±ãããã®Angularã©ã€ãã©ãªã
- `HttpClient`ïŒããŒãªã³ã°ããã³ãã³ã°ããŒãªã³ã°ã«äœ¿çšã§ããŸãã
- RxJS (Reactive Extensions for JavaScript)ã¯Angularã§å€çšãããŠãããSSEãWebSocketããã®éåæããŒã¿ã¹ããªãŒã ãåŠçããããã®åŒ·åãªããŒã«ãæäŸããŸãã
Vue.js
- `vue-socket.io`ïŒWebSocketãæ±ãããã®Vue.jsãã©ã°ã€ã³ã
- `axios`ïŒããŒãªã³ã°ããã³ãã³ã°ããŒãªã³ã°ã«äœ¿çšã§ãã人æ°ã®HTTPã¯ã©ã€ã¢ã³ãã
- VuexïŒVueã®ç¶æ 管çã©ã€ãã©ãªïŒã䜿çšããŠããªã¢ã«ã¿ã€ã ããŒã¿æŽæ°ã管çã§ããŸãã
ãªã¢ã«ã¿ã€ã ããŒã¿åæã®ãã¹ããã©ã¯ãã£ã¹
æåããå¹ççãªãªã¢ã«ã¿ã€ã ããŒã¿åæå®è£ ã確ä¿ããããã«ã以äžã®ãã¹ããã©ã¯ãã£ã¹ã«åŸã£ãŠãã ããïŒ
- ããŒã¿è»¢éã®æé©åïŒå¿ èŠãªæŽæ°ã®ã¿ãéä¿¡ããããšã§ããããã¯ãŒã¯äžã§è»¢éãããããŒã¿éãæå°éã«æããŸãããã€ããªããŒã¿åœ¢åŒãå§çž®æè¡ã®äœ¿çšãæ€èšããŠãã ããã
- ãšã©ãŒãã³ããªã³ã°ã®å®è£ ïŒæ¥ç¶ã®äžæããšã©ãŒãé©åã«åŠçããŸãããŠãŒã¶ãŒã«æçãªãã£ãŒãããã¯ãæäŸããèªåçã«åæ¥ç¶ã詊ã¿ãŠãã ããã
- æ¥ç¶ã®ä¿è·ïŒHTTPSãWSSãªã©ã®å®å šãªãããã³ã«ã䜿çšããŠãããŒã¿ã®çèŽãæ¹ããããä¿è·ããŸããé©åãªèªèšŒã»èªå¯ã¡ã«ããºã ãå®è£ ããŠãã ããã
- ã€ã³ãã©ã¹ãã©ã¯ãã£ã®ã¹ã±ãŒãªã³ã°ïŒå€æ°ã®åææ¥ç¶ãåŠçã§ããããã«ããã¯ãšã³ãã€ã³ãã©ã¹ãã©ã¯ãã£ãèšèšããŸããããŒããã©ã³ã·ã³ã°ã忣ãã£ãã·ã³ã°ã®äœ¿çšãæ€èšããŠãã ããã
- ããã©ãŒãã³ã¹ã®ç£èŠïŒãªã¢ã«ã¿ã€ã ããŒã¿åæå®è£ ã®ããã©ãŒãã³ã¹ãç£èŠããŸããé å»¶ãã¹ã«ãŒãããããšã©ãŒçãªã©ã®ã¡ããªã¯ã¹ã远跡ããŠãã ããã
- ããŒãããŒãã®äœ¿çšïŒããŒãããŒãã¡ã«ããºã ãå®è£ ããŠãããããŸãã¯éã¢ã¯ãã£ããªæ¥ç¶ãæ€åºããé©åã«éããŸããããã¯ç¹ã«WebSocketã§éèŠã§ãã
- ããŒã¿ã·ãªã¢ã©ã€ãŒãŒã·ã§ã³ïŒã¢ããªã±ãŒã·ã§ã³ã®ããŒãºã«åºã¥ããŠãé©åãªããŒã¿ã·ãªã¢ã©ã€ãŒãŒã·ã§ã³åœ¢åŒïŒäŸïŒJSONãProtocol BuffersïŒãéžæããŸããProtocol Buffersã¯ã倧éã®ããŒã¿ã«å¯ŸããŠJSONãããå¹ççãªå ŽåããããŸãã
- ã°ã¬ãŒã¹ãã«ãã°ã©ããŒã·ã§ã³ïŒãªã¢ã«ã¿ã€ã æ©èœãå©çšã§ããªãå ŽåïŒäŸïŒãããã¯ãŒã¯ã®åé¡ïŒããã£ãã·ã¥ãããããŒã¿ã衚瀺ãããããŠãŒã¶ãŒãæåã§ããŒãžãæŽæ°ã§ããããã«ãããªã©ããã©ãŒã«ããã¯ã¡ã«ããºã ãæäŸããŸãã
- ããŒã¿ã®åªå é äœä»ãïŒç°ãªãçš®é¡ã®ãªã¢ã«ã¿ã€ã ããŒã¿ãããå ŽåãæãéèŠãªããŒã¿ãåªå ããŠãè¿ éãã€ç¢ºå®ã«é ä¿¡ãããããã«ããŸãã
å®äžçã®äŸ
- éèååŒãã©ãããã©ãŒã ïŒæ ªäŸ¡ãæ³šææ¿ãåžå ŽããŒã¿ã¯ããã¬ãŒããŒã«ææ°ã®æ å ±ãæäŸããããã«WebSocketãŸãã¯SSEã䜿çšããŠãªã¢ã«ã¿ã€ã ã§æŽæ°ãããŸãã
- å ±åããã¥ã¡ã³ãç·šéïŒè€æ°ã®ãŠãŒã¶ãŒãåæã«åãããã¥ã¡ã³ããç·šéã§ãã倿Žã¯WebSocketã䜿çšããŠãªã¢ã«ã¿ã€ã ã§åæ ãããŸããGoogleããã¥ã¡ã³ãããã®ä»£è¡šäŸã§ãã
- ã©ã€ãã¹ããŒãã¹ã³ã¢ïŒã¹ããŒãã®ã¹ã³ã¢ãçµ±èšã¯ããã¡ã³ã«ææ°ã®æ å ±ãæäŸããããã«SSEãŸãã¯WebSocketã䜿çšããŠãªã¢ã«ã¿ã€ã ã§æŽæ°ãããŸãã
- ãã£ããã¢ããªã±ãŒã·ã§ã³ïŒãã£ããã¡ãã»ãŒãžã¯WebSocketã䜿çšããŠãªã¢ã«ã¿ã€ã ã§é ä¿¡ãããŸãã
- ã©ã€ãã·ã§ã¢ã¢ããªïŒäœçœ®ããŒã¿ã¯WebSocketã䜿çšããŠãªã¢ã«ã¿ã€ã ã§æŽæ°ããããã©ã€ããŒãšä¹å®¢ã®äœçœ®ã远跡ããŸãã
- IoTããã·ã¥ããŒãïŒIoTããã€ã¹ããã®ããŒã¿ã¯ãWebSocketãŸãã¯SSEã䜿çšããŠãªã¢ã«ã¿ã€ã ã§è¡šç€ºãããŸãã
çµè«
ããã³ããšã³ãã®ãªã¢ã«ã¿ã€ã ããŒã¿åæã¯ãçŸä»£ã®Webã¢ããªã±ãŒã·ã§ã³ã®éèŠãªåŽé¢ã§ããå©çšå¯èœãªããŸããŸãªæè¡ãçè§£ãããã¹ããã©ã¯ãã£ã¹ã«åŸãããšã§ããŠãŒã¶ãŒã«ã·ãŒã ã¬ã¹ã§é åçããã€æçãªäœéšãæäŸããã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ã§ããŸããé©åãªã¢ãããŒãã®éžæã¯ãç¹å®ã®ã¢ããªã±ãŒã·ã§ã³èŠä»¶ãšãè€éããã¹ã±ãŒã©ããªãã£ãããã©ãŒãã³ã¹ã®éã®ãã¬ãŒããªãã«äŸåããŸããWebæè¡ãé²åãç¶ããäžã§ããªã¢ã«ã¿ã€ã ããŒã¿åæã®ææ°ã®é²æ©ã«ã€ããŠåžžã«æ å ±ãåŸãããšããæå 端ã®ã¢ããªã±ãŒã·ã§ã³ãæ§ç¯ããããã«äžå¯æ¬ ã§ãã
ããã³ããšã³ãã¢ããªã±ãŒã·ã§ã³ã§ãªã¢ã«ã¿ã€ã ããŒã¿åæãå®è£ ããéã¯ãåžžã«ã»ãã¥ãªãã£ãã¹ã±ãŒã©ããªãã£ããŠãŒã¶ãŒãšã¯ã¹ããªãšã³ã¹ãåªå ããããšãå¿ããªãã§ãã ããã